<template>
    <ul class="list">
        <li class="item" v-for="item of letters"
            :key="item"
            :ref="item"
            @click="handleLetterClick"
            @handlestart="HandleTouchStart"
            @handlemove="HandleTouchMove"
            @handleend="HandleTouchEnd"
        >{{item}}</li>

    </ul>
</template>

<script>
    export default {
        name: "CityAlphabet",
        props:{
            cities:Object
        },
        data:function(){
            return{
                TouchStatus:false,
                startY:0,
                timer:null

            }
        },
        updated:function(){
            this.startY=this.$refs['A'][0].offsetTop
        },
        computed:{
            letters :function(){
                const letters=[];
                for(let i in this.cities){
                    letters.push(i)
                }
                return letters
            }
        },
        methods:{
            handleLetterClick:function(e){
                this.$emit('change',e.target.innerText);

            },
            HandleTouchStart:function(){
                this.TouchStatus=true
            },
            HandleTouchMove:function(e){
                 if(this.TouchStatus){
                     if(this.timer){
                         clearTimeout(this.timer)
                     }
                     this.timer=setTimeout(()=>{
                         const touchY=e.touches[0].clientY-79;
                         const index=Math.floor((this.startY-touchY)/20);
                         if(index <= 0 && index<this.letters.length){
                             this.$emit('change',this.letters[index])
                         }
                     },16);


                 }
            },
            HandleTouchEnd:function(){
                this.TouchStatus=false
            }
        }
    }
</script>

<style lang="stylus" scoped>
    @import "~styles/varibles.styl"
 .list
     display: flex
     flex-direction: column
     justify-content: center
     position: absolute
     top: 1.58rem
     right: 0
     bottom: 0
     width: .4rem
     .item
         line-height: .4rem
         text-align: center
         color: $bgColor

</style>